<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" id="vp" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
		<title>班级排行</title>
		<link href="../../../css/style.css" rel="stylesheet" type="text/css">
		<link href="../../../css/mui.css" rel="stylesheet" type="text/css">
		<style>
			.help ul li span{
				background: #f4655d;
				color: #fff;
				border-radius:5px;
				padding: 1px;
				margin-left: 10px;
				font-size: 14px;
			}
			.me_content_list{
				background: none;
			}
			.me_content_list .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
				font-size: 16px;
				margin-top: 0;
				height: 30px;
				line-height: 30px;
			    text-overflow: ellipsis;
				width: 85%;
				overflow: hidden!important;
			}
			.helptitle{
				font-size: 14px;
				padding:0 15px;
				display: block;
    			margin: 10px 0;
			}
		</style>
	</head>
	<body>
		<div id="me" class='help'>
			<div id="help">
			<span class="helptitle">热门问题</span>
			<div class="mui-content me_content">
				<div class="me_content_list">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-sm-12 mui-col-xs-12" v-for="item in items.hot" @tap="opendetail(item)">
							<a href="javascript:;" class="mui-navigate-right">
								<div class="mui-media-body">{{item.content}}</div>
							</a> 
						</li>
					</ul>
				</div>
			</div>
			<span class="helptitle">基础功能</span>
			<div class="mui-content me_content">
				<div class="me_content_list">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-sm-12 mui-col-xs-12" v-for="item in items.chick" @tap="opendetail(item)">
							<a href="javascript:;" class="mui-navigate-right">
								<div class="mui-media-body">{{item.content}}</div>
							</a> 
						</li>
					</ul>
				</div>
			</div>
			<span class="helptitle">安全问题</span>
			<div class="mui-content me_content">
				<div class="me_content_list">
					<ul class="mui-table-view mui-grid-view mui-grid-9">
						<li class="mui-table-view-cell mui-media mui-col-sm-12 mui-col-xs-12" v-for="item in items.an" @tap="opendetail(item)">
							<a href="javascript:;" class="mui-navigate-right">
								<div class="mui-media-body">{{item.content}}</div>
							</a> 
						</li>
					</ul>
				</div>
			</div>
			</div>
			
		</div>
		<script type="text/javascript" src="../../../js/jquery-1.8.3.min.js"></script>
		<script src="../../../js/mui.js"></script>
		<script src="../../../js/vue.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/token.js"></script>
		<script>
			
			mui.init();
			var state = app.getState();
			var uid="";

			mui.plusReady(function() {
				
				uid = state.userid;
				memberToken = state.memberToken;
				mui.post(Apiurl+'index/help' , {
					uid:state.userid,
					memberToken: memberToken
				 },
				function(data){
					//console.log(JSON.stringify(data));
					help.items=data
				},'json')
			})
			
			var help = new Vue({
				el: '#help',
				data: {
					items: [] 
				},
				methods: {
					opendetail: function(item){
						mui.openWindowWithTitle({
							url:"./helpContent.html",
							id:"helpContentv",
							extras: {
								userid: state.userid,
								helpid: item.id
							},
							createNew:true,
							styles: {
								"render": "always",
								"popGesture": "hide",
								"bounce": "vertical",
								"bounceBackground": "#efeff4",
								"titleNView": titleNView = { //详情页原生导航配置
									autoBackButton: true, //自动绘制返回箭头
									backgroundColor: '#fff', //导航栏背景色
									titleText: "详细信息", //导航栏标题
									titleColor: '#000', //文字颜色
									//coverage:"120px",
									//type: 'transparent', //透明渐变样式
									splitLine: { //底部分割线
										color: '#dfdfdf'
									}
								}
							}
						})
					}
				}
			})
		</script>
	</body>
</html>
